<!DOCTYPE html>
<html ng-app="g">
<head>
    <title>Google Login Provider</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--
    This client ID works only for localhost:8080, if you want to try more, create your own application
    Also change the client-id configured in application.conf
    -->
    <meta name="google-signin-client_id" content="your-client-id.apps.googleusercontent.com">

    <!-- Latest CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Angular.js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- This application's javascript -->
<script type="text/javascript" src="static/js/google-app.js"></script>
<!-- Google API -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

<script type="text/javascript">
    function onSignIn(googleUser) {
        var profile = googleUser.getBasicProfile();
        var id_token = googleUser.getAuthResponse().id_token;
        var elem = document.getElementById('gat_input');
        elem.value = id_token;
        console.log('Bearer ' + id_token);
        console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
        console.log('Expires in ' + googleUser.getAuthResponse().expires_in + ' seconds');
        console.log('Expiry: ' + googleUser.getAuthResponse().expires_at);
    }
</script>

<div id="app">
    <table border="0" cellpadding="1" cellspacing="1">
        <tr>
            <td><p>Login to Google.</p></td>
        </tr>
        <tr>
            <td>
                <div class="g-signin2" data-onsuccess="onSignIn"></div>
            </td>
        </tr>
        <tr>
            <td>
                <form name="privateForm"
                      ng-submit="document.getElementById('gat_input').value() != '' && gCtrl.callBackend()" novalidate
                      ng-controller="GoogleController as gCtrl">
                    <input type="text" id="gat_input" ng-minlength="5" style="display: none;"/>
                    <div class="form-footer">
                        <button type="submit" class="btn btn-primary pull-right">Call backend</button>
                    </div>
                </form>
            </td>
        </tr>
    </table>
</div>

</body>
</html>
